<template>
  <header class="border-b border-gray-1200 sticky top-0 z-50"
    :class="{'bg-linear':isLinear,'bg-white': !isLinear }">
    <div class="relative">
      <div class="flex justify-between items-center max-w-11xl mx-auto px-4 py-4 lg:justify-between lg:gap-x-5 2xl:gap-x-7">
        <div class="flex justify-start lg:flex-shrink-0">
          <common-link path="/"
            class="go-home lg:-mt-2">
            <span class="
            sr-only">Toolify</span>
            <img class="h-10 w-auto sm:h-9"
              src="@/static/images/logo.png"
              alt="Toolify logo" />
          </common-link>
        </div>
        <div class="-mr-2 -my-2 lg:hidden">
          <div @click="openMenu"
            class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-1800 hover:text-gray-1000 hover:bg-gray-1200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 to-open-menu cursor-pointer">
            <svg-icon className="text-2xl w-6 h-6"
              :isDiv="true"
              iconName='open'></svg-icon>
          </div>
        </div>
        <div as="nav"
          class="hidden lg:flex lg:gap-x-2.5 2xl:gap-x-7 flex-1"
          v-if="!isMobile">
          <common-menu-bar :menusList="productMenusList"
            parentPath="/"
            title="header_product"></common-menu-bar>
          <common-link path="/category"
            class="text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-group"
            :class="{'text-purple-1300 font-semibold':$route.name==='category ' || $route.name==='lang-category'}">
            {{$t('header_categories')}}
          </common-link>
          <common-menu-bar :menusList="rankMenusList"
            parentPath="/Best-trending-AI-Tools"
            title="header_rank"></common-menu-bar>

          <common-link path="/Best-AI-Tools-revenue"
            class="text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-revenueRank"
            :class="{'text-purple-1300 font-semibold':$route.name==='Best-AI-Tools-revenue' || $route.name==='lang-Best-AI-Tools-revenue'}">
            {{$t('header_highRevenueAIs')}}
          </common-link>
          <common-link path="/gpts"
            class="text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-AILibrary"
            :class="{'text-purple-1300 font-semibold':$route.name==='gpts' || $route.name==='lang-gpts' || $route.name==='gpts-handle' || $route.name==='lang-gpts-handle'}">
            {{$t('header_gpts')}}
          </common-link>
          <!-- <common-link path="/submit"
            class="inline-flex items-center text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-advertise"
            :class="{'text-purple-1300 font-semibold':$route.name==='submit' || $route.name==='lang-submit' || $route.name==='advertise' || $route.name==='lang-advertise' || $route.name==='update-ai' || $route.name==='lang-update-ai' || $route.name==='submit-gpt' || $route.name==='lang-submit-gpt' || $route.name==='business' || $route.name==='lang-business'}">
            <svg-icon className="text-lg mr-1 -mt-0.5 text-purple-1300"
              :isDiv="true"
              iconName='promote'></svg-icon>
            <span>{{$t('header_submitAdvertise')}}</span>
          </common-link> -->

          <common-menu-bar :menusList="submitMenusList"
            parentPath="/submit"
            icon="promote"
            :isSpec="true"
            title="header_submitAdvertise"></common-menu-bar>
        </div>
        <div class="hidden flex-shrink-0 lg:flex items-center justify-end lg:flex-shrink-0  md:space-x-5 lg:space-x-3 xl:space-x-4 "
          v-if="!isMobile">
          <header-search v-if="!hasBannerTop"></header-search>
          <!-- <common-link path="/ai-library"
            class="text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-AILibrary"
            :class="{'text-purple-1300 font-semibold':$route.name==='ai-library' || $route.name==='lang-ai-library'}">
            {{$t('header_AILibrary')}}
          </common-link> -->
          <common-link path="/favorites"
            class="text-md leading-8 text-gray-1000 hover:text-purple-1300 whitespace-nowrap go-favorites"
            :class="{'text-purple-1300 font-semibold':$route.name==='favorites' || $route.name==='lang-favorites'}">
            {{$t('header_favourites')}}
          </common-link>

          <common-link path="/login"
            class="flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 commonBtn go-login"
            v-if="!toolify_isLogin">
            <span class="whitespace-nowrap">{{$t('login')}}</span>
          </common-link>
          <user-dropdown v-if="toolify_isLogin"
            :logoutLoading="logoutLoading"
            @toLogout="toLogout"></user-dropdown>

          <common-language :has-border="false"
            :key="locale"></common-language>
        </div>
      </div>
      <template v-if="isMobile">
        <transition enter-active-class="duration-200 ease-out"
          enter-from-class="opacity-0 scale-95"
          enter-to-class="opacity-100 scale-100"
          leave-active-class="duration-100 ease-in"
          leave-from-class="opacity-100 scale-100"
          leave-to-class="opacity-0 scale-95">
          <div v-show="!isHideMenu"
            focus
            class="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
            <div class="rounded-lg nav-mobile shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-1200">
              <div class="pt-5 pb-6 px-5">
                <div class="flex items-center justify-between">
                  <common-link path="/"
                    class="go-home">
                    <span class="sr-only">Toolify</span>
                    <img class="h-8 w-auto sm:h-9"
                      src="@/static/images/logo.png"
                      alt="Toolify logo" />
                  </common-link>
                  <div class="-mr-2">
                    <div @click="hideMenu"
                      class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-1800 hover:text-gray-1000 hover:bg-gray-1200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 to-hide-menu">
                      <svg-icon iconName='close'
                        className="text-2xl"></svg-icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="py-6 px-5">
                <div class="relative menu-bar"
                  ref="product-sub-menu">
                  <div class="flex items-center justify-between text-base font-medium text-gray-1000 sub-title cursor-pointer"
                    @click="showSubMenu('product-sub-menu')">
                    <span>{{$t('header_product')}}</span>
                    <svg class="-mr-1 ml-2 h-5 w-5"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true">
                      <path fill-rule="evenodd"
                        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                        clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div class="sub-menu px-4 py-2 bg-white rounded mt-2">
                    <ul class="space-y-3">
                      <li v-for="(item,key) in productMenusList"
                        :key="key">
                        <common-link :path="item.path"
                          class="flex items-center max-w-full group">
                          <span class="icon">
                            <svg-icon class="mr-1 text-purple-1300 w-4.5 h-4.5"
                              :class="{}"
                              :iconName='item.icon'></svg-icon>
                          </span>
                          <div class="flex-1 ml-5 w-0">
                            <div class="text-base text-gray-10000 group-hover:text-purple-1300 whitespace-nowrap truncate"
                              :class="{'text-purple-1300 font-semibold group-hover:opacity-90':item.activedMenu.includes($route.name)}">{{$t(item.title)}}</div>
                            <p class="text-sm text-gray-1500 mt-0.5 whitespace-nowrap truncate">{{$t(item.desc)}}</p>
                          </div>
                        </common-link>
                      </li>
                    </ul>
                  </div>
                </div>
                <el-divider class="mt-4 mb-5"></el-divider>
                <div class="relative menu-bar"
                  ref="rank-sub-menu">
                  <div class="flex items-center justify-between text-base font-medium text-gray-1000 sub-title cursor-pointer"
                    @click="showSubMenu('rank-sub-menu')">
                    <span>
                      {{$t('header_rank')}}
                    </span>
                    <svg class="-mr-1 ml-2 h-5 w-5"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true">
                      <path fill-rule="evenodd"
                        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                        clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div class="sub-menu px-4 py-2 bg-white rounded mt-2">
                    <ul class="space-y-3">
                      <li v-for="(item,key) in rankMenusList"
                        :key="key">
                        <common-link :path="item.path"
                          class="flex items-center max-w-full group">
                          <span class="icon">
                            <svg-icon class="mr-1 text-gray-1500 w-4.5 h-4.5"
                              :class="{}"
                              :iconName='item.icon'></svg-icon>
                          </span>
                          <div class="flex-1 ml-5 w-0">
                            <div class="text-base text-gray-10000 group-hover:text-purple-1300 whitespace-nowrap truncate"
                              :class="{'text-purple-1300 font-semibold group-hover:opacity-90':item.activedMenu.includes($route.name)}">{{$t(item.title)}}</div>
                            <p class="text-sm text-gray-1500 mt-0.5 whitespace-nowrap truncate">{{$t(item.desc)}}</p>
                          </div>
                        </common-link>
                      </li>
                    </ul>
                  </div>
                </div>
                <el-divider class="mt-4 mb-5"></el-divider>
                <div class="relative menu-bar"
                  ref="submit-sub-menu">
                  <div class="flex items-center justify-between text-base font-medium text-gray-1000 sub-title cursor-pointer"
                    @click="showSubMenu('submit-sub-menu')">
                    <span>
                      {{$t('header_submitAdvertise')}}
                    </span>
                    <svg class="-mr-1 ml-2 h-5 w-5"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true">
                      <path fill-rule="evenodd"
                        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                        clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div class="sub-menu px-4 py-2 bg-white rounded mt-2">
                    <ul class="space-y-3">
                      <li v-for="(item,key) in submitMenusList"
                        :key="key">
                        <common-link :path="item.path"
                          class="flex items-center max-w-full group">
                          <span class="icon">
                            <svg-icon class="mr-1 text-gray-1500 w-4.5 h-4.5 text-purple-1300"
                              :class="{}"
                              :iconName='item.icon'></svg-icon>
                          </span>
                          <div class="flex-1 ml-5 w-0">
                            <div class="text-base text-gray-10000 group-hover:text-purple-1300 whitespace-nowrap truncate"
                              :class="{'text-purple-1300 font-semibold group-hover:opacity-90':item.activedMenu.includes($route.name)}">{{$t(item.title)}}</div>
                          </div>
                        </common-link>
                      </li>
                    </ul>
                  </div>
                </div>
                <el-divider class="mt-4 mb-5"></el-divider>
                <div class="grid grid-cols-2 gap-4">
                  <common-link path="/category"
                    class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-group"
                    :class="{'text-purple-1300 font-semibold':$route.name==='category' || $route.name==='lang-category'}">
                    {{$t('header_categories')}}
                  </common-link>
                  <common-link path="/Best-AI-Tools-revenue"
                    class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-revenueRank"
                    :class="{'text-purple-1300 font-semibold':$route.name==='Best-AI-Tools-revenue' || $route.name==='lang-Best-AI-Tools-revenue'}">
                    {{$t('header_highRevenueAIs')}}
                  </common-link>
                  <common-link path="/gpts"
                    class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-favorites"
                    :class="{'text-purple-1300 font-semibold':$route.name==='gpts' || $route.name==='lang-gpts'}">
                    {{$t('header_gpts')}}
                  </common-link>
                  <common-link path="/favorites"
                    class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-favorites"
                    :class="{'text-purple-1300 font-semibold':$route.name==='favorites' || $route.name==='lang-favorites'}">
                    {{$t('header_favourites')}}
                  </common-link>
                  <!-- <common-link path="/ai-library"
                  class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-ai-library"
                  :class="{'text-purple-1300 font-semibold':$route.name==='ai-library' || $route.name==='lang-ai-library'}">
                  {{$t('header_AILibrary')}}
                </common-link> -->
                  <common-link path="/user"
                    v-if="toolify_isLogin"
                    class="inline-flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 go-paymentOrder"
                    :class="{'text-purple-1300 font-semibold': ($route.name === 'lang-user' || $route.name === 'user') && (!$route.query || !$route.query.tab)}">
                    <span>{{$t('user_myProfile')}}</span>
                  </common-link>
                  <common-link path="/user?tab=submitAI"
                    v-if="toolify_isLogin"
                    class="inline-flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 go-submitAIOrder"
                    :class="{'text-purple-1300 font-semibold': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'submitAI'}">
                    <span>{{$t('user_submitAi')}}</span>
                  </common-link>
                  <common-link path="/user?tab=advertise"
                    v-if="toolify_isLogin"
                    class="inline-flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 go-advertiseOrder"
                    :class="{'text-purple-1300 font-semibold': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'advertise'}">
                    <span>{{$t('user_advertisement')}}</span>
                  </common-link>
                  <common-link path="/user?tab=updateAi"
                    v-if="toolify_isLogin"
                    class="inline-flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 go-updateAiOrder"
                    :class="{'text-purple-1300 font-semibold': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'updateAi'}">
                    <span>{{$t('user_updateAi')}}</span>
                  </common-link>
                  <common-link path="/user?tab=submitGpt"
                    v-if="toolify_isLogin"
                    class="inline-flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 go-submitGptOrder"
                    :class="{'text-purple-1300 font-semibold': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'submitGpt'}">
                    <span>{{$t('user_submitGpt')}}</span>
                  </common-link>
                  <div class="text-base font-medium text-gray-1000 hover:text-purple-1300 go-logout cursor-pointer"
                    :class="{'text-purple-1300': logoutLoading}"
                    v-if="toolify_isLogin"
                    @click="toLogout">
                    <i class="el-icon-loading"
                      v-if="logoutLoading"></i>
                    <span>{{$t('logout')}}</span>
                  </div>
                </div>
                <div class="mt-6 pt-5 border-t border-gray-1200">
                  <div class="flex items-center justify-between">
                    <common-language :has-border="false"
                      :isFooter="true"></common-language>

                    <common-link path="/login"
                      class="flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 ml-8 commonBtn go-login"
                      v-if="!toolify_isLogin">
                      <span class="whitespace-nowrap">{{$t('login')}}</span>
                    </common-link>

                    <div class="flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 ml-8 commonBtn cursor-pointer whitespace-nowrap to-logout"
                      v-if="toolify_isLogin">
                      <span class="avatar"
                        v-if="userinfo && (userinfo.account || userinfo.username)">
                        {{
                        userinfo && (userinfo.account || userinfo.username)
                          ? userinfo.account
                            ? userinfo.account
                            : userinfo.username
                          : "-" | filterFirstString
                      }}
                      </span>
                      <img src="@/static/images/toolify_picture.png"
                        class="w-10 mr-3"
                        v-else>
                      <span class="whitespace-nowrap">
                        {{
                        userinfo && (userinfo.account || userinfo.username)
                          ? userinfo.account
                            ? userinfo.account
                            : userinfo.username
                          : "-" | filterEmail
                      }}
                      </span>
                    </div>

                    <!-- <div class="flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 ml-10 commonBtn cursor-pointer whitespace-nowrap to-logout"
                    v-if="toolify_isLogin"
                    :loading="logoutLoading"
                    @click="toLogout">
                    <span class="whitespace-nowrap">{{$t('logout')}}</span>
                  </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </template>
    </div>
  </header>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import HeaderSearch from './HeaderSearch.vue'
export default {
  components: { HeaderSearch },
  name: 'CommonHeader',
  computed: {
    ...mapState({
      toolify_isLogin: (state) => state.toolify_isLogin,
      locale: (state) => state.locale,
      userinfo: (state) => state.userinfo,
    }),
    hasBannerTop() {
      let pageName = this.$route.name.replace('lang-', '')
      const hasBannerTopPage = [
        'index',
        'new',
        'most-saved',
        'most-used',
        'browser-extension',
        'apps',
        'search-handle',
        'free',
        'month-handle',
        'discord',
        'ai-extensions',
      ]
      return hasBannerTopPage.indexOf(pageName) >= 0
    },
  },
  data() {
    return {
      isHideMenu: true,
      open: false,
      randomHandle: null,
      logoutLoading: false,
      isLinear: false,
      isListMenu: [
        'Best-trending-AI-Tools-month',
        'lang-Best-trending-AI-Tools-month',
        'Best-AI-Tools-Category-category',
        'lang-Best-AI-Tools-Category-category',
        'Best-AI-Tools-region-region',
        'lang-Best-AI-Tools-region-region',
        'Best-AI-Tools-Source-source',
        'lang-Best-AI-Tools-Source-source',
      ],

      productMenusList: [
        {
          path: '/new',
          title: 'header_product_title_NewAI',
          desc: 'header_product_desc_NewAI',
          icon: 'newaI',
          activedMenu: ['new', 'lang-new'],
        },
        {
          path: '/most-saved',
          title: 'header_product_title_MostSavedAI',
          desc: 'header_product_desc_MostSavedAI',
          icon: 'savedaI',
          activedMenu: ['most-saved', 'lang-most-saved'],
        },
        {
          path: '/most-used',
          title: 'header_product_title_MostUserdAI',
          desc: 'header_product_desc_MostUserdAI',
          icon: 'userdaI',
          activedMenu: ['most-used', 'lang-most-used'],
        },
        {
          path: '/browser-extension',
          title: 'header_product_title_browserExtension',
          desc: 'header_product_desc_browserExtension',
          icon: 'chrome_2',
          activedMenu: ['browser-extension', 'lang-browser-extension'],
        },
        {
          path: '/apps',
          title: 'header_product_title_apps',
          desc: 'header_product_desc_apps',
          icon: 'app',
          activedMenu: ['apps', 'lang-apps'],
        },
        {
          path: '/discord',
          title: 'header_product_title_discordOfAI',
          desc: 'header_product_desc_discordOfAI',
          icon: 'discord_default',
          activedMenu: ['discord', 'lang-discord'],
        },
      ],
      rankMenusList: [
        {
          path: '/Best-trending-AI-Tools',
          title: 'header_rank_title_AIRankingMonthly',
          desc: 'header_rank_desc_AIRankingMonthly',
          icon: 'aimonthly',
          activedMenu: [
            'Best-trending-AI-Tools-month',
            'lang-Best-trending-AI-Tools-month',
          ],
        },
        {
          path: '/Best-AI-Tools-Category',
          title: 'header_rank_title_TopAIByCategories',
          desc: 'header_rank_desc_TopAIByCategories',
          icon: 'topaI',
          activedMenu: [
            'Best-AI-Tools-Category-category',
            'lang-Best-AI-Tools-Category-category',
          ],
        },
        {
          path: '/Best-AI-Tools-region',
          title: 'header_rank_title_TopAIFromOverworld',
          desc: 'header_rank_desc_TopAIFromOverworld',
          icon: 'overworld',
          activedMenu: [
            'Best-AI-Tools-region-region',
            'lang-Best-AI-Tools-region-region',
          ],
        },
        {
          path: '/Best-AI-Tools-Source',
          title: 'header_rank_title_AIRankingbyTrafficSource',
          desc: 'header_rank_desc_AIRankingbyTrafficSource',
          icon: 'aIranking',
          activedMenu: [
            'Best-AI-Tools-Source-source',
            'lang-Best-AI-Tools-Source-source',
          ],
        },
        {
          path: '/Best-AI-Tools-revenue',
          title: 'header_rank_title_AIRankingbyRevenue',
          desc: 'header_rank_desc_AIRankingbyRevenue',
          icon: 'revenue',
          activedMenu: ['Best-AI-Tools-revenue', 'lang-Best-AI-Tools-revenue'],
        },
      ],

      submitMenusList: [
        {
          path: '/submit',
          title: 'header_submit',
          icon: 'submit-icon',
          activedMenu: ['submit', 'lang-submit'],
        },
        {
          path: '/advertise',
          title: 'header_advertise',
          icon: 'advertise-icon',
          activedMenu: ['advertise', 'lang-advertise'],
        },
        {
          path: '/update-ai',
          title: 'header_updateAi',
          icon: 'update',
          activedMenu: ['update-ai', 'lang-update-ai'],
        },
        {
          path: '/submit-gpt',
          title: 'header_submitGpt',
          icon: 'GPT',
          activedMenu: ['submit-gpt', 'lang-submit-gpt'],
        },
        {
          path: '/business',
          title: 'header_business',
          icon: 'morebusiness',
          activedMenu: ['business', 'lang-business'],
        },
      ],

      isMobile: false,
    }
  },
  filters: {
    filterFirstString: function (value) {
      let tArray = []
      if (value && value.length > 0) {
        tArray = value.split('')
      }
      return tArray && tArray.length > 0 ? tArray[0].toLocaleUpperCase() : '-'
    },
    filterEmail: function (value) {
      let tArray = []
      let email = null
      if (value && value.length > 0) {
        tArray = value.split('@')
        email = `${
          tArray[0].length > 3 ? `${tArray[0].slice(0, 3)}***` : tArray[0]
        }${value.indexOf('@') >= 0 ? `@${tArray[1]}` : ''}`
      } else {
        email = '-'
      }
      return email
    },
  },
  watch: {
    $route: {
      handler() {
        let timer = setTimeout(() => {
          this.$nextTick(() => {
            this.getIsLinear()
            clearTimeout(timer)
          })
        })
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.getIsLinear()
  },
  mounted() {
    if (this.isLinear) {
      window.addEventListener('scroll', this.onSroll)
    }

    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    ...mapMutations(['SET_ISLOGIN', 'SET_TOP_ADVERTISER']),
    handleResize() {
      const screenWidth = window.innerWidth
      if (screenWidth < 1024) {
        this.isMobile = true
      } else {
        this.isMobile = false
      }
    },
    getIsLinear() {
      this.isLinear =
        this.$route.name === 'lang-index' ||
        this.$route.name === 'lang-favorites' ||
        this.$route.name === 'lang-ai-for-capabilities' ||
        this.$route.name === 'lang-ai-for-jobs' ||
        this.$route.name === 'lang-free' ||
        this.$route.name === 'lang-most-saved' ||
        this.$route.name === 'lang-most-used' ||
        this.$route.name === 'lang-new' ||
        this.$route.name === 'lang-search-handle' ||
        this.$route.name === 'lang-ai-library' ||
        this.$route.name === 'lang-month-handle' ||
        this.$route.name === 'lang-browser-extension' ||
        this.$route.name === 'lang-apps' ||
        this.$route.name === 'lang-gpts' ||
        this.$route.name === 'lang-gpts-favorites' ||
        this.$route.name === 'lang-discord' ||
        this.$route.name === 'lang-discord-page-page' ||
        this.$route.name === 'index' ||
        this.$route.name === 'favorites' ||
        this.$route.name === 'ai-for-capabilities' ||
        this.$route.name === 'ai-for-jobs' ||
        this.$route.name === 'free' ||
        this.$route.name === 'most-saved' ||
        this.$route.name === 'most-used' ||
        this.$route.name === 'new' ||
        this.$route.name === 'search-handle' ||
        this.$route.name === 'ai-library' ||
        this.$route.name === 'month-handle' ||
        this.$route.name === 'browser-extension' ||
        this.$route.name === 'apps' ||
        this.$route.name === 'gpts' ||
        this.$route.name === 'gpts-favorites' ||
        this.$route.name === 'discord' ||
        this.$route.name === 'discord-page-page'
    },
    onSroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop

      if (process.browser && document.querySelector('#linear')) {
        const linearHeight = document.querySelector('#linear').offsetHeight
        //滚动条到底部的条件
        if (scrollTop > linearHeight) {
          this.isLinear = false
        } else {
          this.isLinear = true
        }
      }
    },
    openMenu() {
      this.isHideMenu = false
    },
    hideMenu() {
      this.isHideMenu = true
    },
    async toLogout() {
      this.logoutLoading = true
      try {
        const res = await this.$axiosApi.logout()
        this.logoutLoading = false
        if (res && res.code === 200) {
          this.SET_ISLOGIN(false)
          this.$router.push({
            name: this.locale === 'en' ? 'index' : 'lang-index',
          })
        } else {
          //this.$message.error(res.message)
        }
      } catch (error) {
        this.logoutLoading = false
      }
    },
    async toDiscover() {
      try {
        let req = {}
        if (
          this.$route.name === 'lang-tool-handle' ||
          this.$route.name === 'tool-handle'
        ) {
          req.excepts = this.$route.params.handle
        }

        let toolsRes = await this.$axiosApi.getToolRandom(req)

        if (
          toolsRes.code === 200 &&
          toolsRes.data &&
          toolsRes.data.handle !== null &&
          typeof toolsRes.data.handle != 'undefined'
        ) {
          if (toolsRes.data.handle) {
            this.$router.push({
              name: this.locale === 'en' ? 'tool-handle' : 'lang-tool-handle',
              params: {
                handle: toolsRes.data.handle,
              },
            })
          } else {
            this.$message.error(this.$i18n.t('pageNotFound'))
          }
        } else {
          //this.$message.error(res.message ? res.message : 'error')
        }
      } catch (err) {
        console.log(err)
      }
    },
    isNotCrowd() {
      return (
        this.locale !== 'pt' &&
        this.locale !== 'fr' &&
        this.locale !== 'es' &&
        this.locale !== 'de'
      )
    },
    showSubMenu(dom) {
      if (this.$refs[dom].classList.contains('show')) {
        this.$refs[dom].classList.remove('show')
      } else {
        this.$refs[dom].classList.add('show')
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onSroll, false)
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>
<style lang='scss' scoped>
header {
  will-change: transform;
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: rgba($color: #000000, $alpha: 0.8);
    .el-dropdown-link {
      white-space: nowrap;
      svg {
        font-size: 22px;
        fill: #2f3032;
        margin-right: 8px;
      }
      &:hover {
        color: #7150e6;
        .el-icon--right {
          color: #7150e6;
        }
        svg {
          fill: #7150e6;
        }
      }
    }
  }
  .commonBtn {
    svg {
      font-size: 22px;
      margin-right: 8px;
    }
  }
  &.bg-linear {
    border: 0 !important;
  }

  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: #ebe6ff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 6px;
    font-size: 22px;
    font-weight: 600;
    color: #7150e6;
  }

  &.bg-white {
    //border: 0 !important;
    .header-search {
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    }
  }

  ::v-deep .el-divider__text {
    background-color: #fafafa;
  }

  .nav-mobile {
    max-height: 98vh;
    overflow-y: auto;
  }
  .menu-bar {
    .sub-menu {
      display: none;
      .sub-title {
        svg {
          transition: 0.2s;
        }
      }
    }
    &.show {
      .sub-menu {
        display: block;
      }
      .sub-title {
        svg {
          transform: rotate(180deg);
        }
      }
    }
  }
}
@media (min-width: 1024px) {
  header {
    &.bg-linear {
      ::v-deep .avatar {
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>
